<template>
	<view class="container">
		<cu-custom>
			<block slot="left">
				<view class="header-title">高速公路监控系统</view>
			</block>
		</cu-custom>

		<view class="page-container" :style="{'height': WindowHeight + 'px'}">
			<image src="../../static/bg.jpg"></image>
			<view class="form-container">
				<view class="form-title">登录</view>  
				<view class="form-item">
					<input v-model="userName" maxlength="10" placeholder="请输入用户名" name="input"></input>
				</view>
				<view class="form-item">
					<input v-model="password" maxlength="10" placeholder="请输入密码" name="input"></input>
				</view>
				<button @click="login" class="cu-btn round bg-blue">登录</button>
			</view>
		</view> 
	</view>
</template>

<script>
	import {
		userLogin,
	} from '@/api/index.js';
	import {
		wxLogin,
	} from '@/utils/wx.js'
	import Vue from 'vue'
	export default {
		data() {
			return {
				WindowHeight: this.WindowHeight,
				userName: "",
				password: "", 
				userInfo: ""
			};
		},
		onShow() {
			if (uni.getStorageSync("loginInfo")) {
				let loginInfo = JSON.parse(uni.getStorageSync("loginInfo"));
				let {
					userName,
					password
				} = loginInfo;
				this.userName = userName;
				this.password = password;
			}
			if (uni.getStorageSync("userInfo")) {
				this.userInfo = JSON.parse(uni.getStorageSync("userInfo"));
			}
		},
		methods: {
			login() {
				let {userName, password} = this;
				if (!userName) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					});
					return;
				}
				if (!password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				let loginInfo = {
					userName,
					password,
				}
				userLogin(loginInfo).then(res => {
					if (res.code === -1) {
						return;
					}	
					uni.setStorageSync('rolesInfo', JSON.stringify(res.data));
					uni.setStorageSync('loginInfo', JSON.stringify({userName, password}));
					let roles = res.data.roles;
					if (roles.indexOf('管理员') != -1) {
						uni.navigateTo({
							url: "/pages/record/home"
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.container {
		.header-title {
			font-size: 36rpx;
			padding-left: 30rpx;
			color: #fff;
		}

		.page-container {
			height: 100%;
			position: absolute;
			top: 0;
			width: 100%;

			image {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.form-container {
				margin: 280rpx 100rpx 0 100rpx;

				.form-title {
					font-size: 60rpx;
					font-weight: 600;
					text-align: center;
					color: #0081ff;
					margin-bottom: 60rpx;
				}

				.form-item {
					margin-bottom: 30rpx;

					input {
						border: 1px solid #0081ff;
						line-height: 90rpx;
						height: 90rpx;
						text-align: center;
						border-radius: 16rpx;
						font-size: 32rpx;
					}
				}

				button {
					width: 100%;
					height: 90rpx;
					font-size: 34rpx;
					margin-top: 40rpx;
				}
			}
		}
	}
</style>
